import { generateHexAlphaVariants } from './colors'

const space = {
  0.5: '0.125rem',
  1: '0.25rem',
  1.5: '0.375rem',
  2: '0.5rem',
  2.5: '0.625rem',
  3: '0.75rem',
  3.5: '0.875rem',
  4: '1rem',
  5: '1.25rem',
  6: '1.5rem',
  7: '1.75rem',
  8: '2rem',
  9: '2.25rem',
  10: '2.5rem',
  11: '2.75rem',
  12: '3rem',
  14: '3.5rem',
  16: '4rem',
  20: '5rem',
  24: '6rem',
  28: '7rem',
  32: '8rem',
  36: '9rem',
  40: '10rem',
  44: '11rem',
  48: '12rem',
  52: '13rem',
  56: '14rem',
  60: '15rem',
  64: '16rem',
  72: '18rem',
  80: '20rem',
  96: '24rem',
}

const timingFunctions = {
  'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
  'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
  'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
}

const transitionProperties = {
  default: [
    'background-color',
    'border-color',
    'color',
    'fill',
    'stroke',
    'opacity',
    'box-shadow',
    'transform',
  ],
  colors: ['background-color', 'border-color', 'color', 'fill', 'stroke'],
  opacity: ['opacity'],
  shadow: ['box-shadow'],
  transform: ['transform'],
}

const transitions: { [key: string]: string } = Object.keys(
  transitionProperties,
).reduce((obj, key) => {
  obj[key] = transitionProperties[key as keyof typeof transitionProperties]
    .map((property) => `${property} ${timingFunctions['ease-in-out']} 150ms`)
    .join(',')
  return obj
}, {} as { [key: string]: string })

const colors = {
  black: '#000000',
  white: '#ffffff',

  'blue-gray-50': '#f8fafc',
  'blue-gray-100': '#f1f5f9',
  'blue-gray-200': '#e2e8f0',
  'blue-gray-300': '#cbd5e1',
  'blue-gray-400': '#94a3b8',
  'blue-gray-500': '#64748b',
  'blue-gray-600': '#475569',
  'blue-gray-700': '#334155',
  'blue-gray-800': '#1e293b',
  'blue-gray-900': '#0f172a',

  'cool-gray-50': '#f9fafb',
  'cool-gray-100': '#f3f4f6',
  'cool-gray-200': '#e5e7eb',
  'cool-gray-300': '#d1d5db',
  'cool-gray-400': '#9ca3af',
  'cool-gray-500': '#6b7280',
  'cool-gray-600': '#4b5563',
  'cool-gray-700': '#374151',
  'cool-gray-800': '#1f2937',
  'cool-gray-900': '#111827',

  'gray-50': '#fafafa',
  'gray-100': '#f4f4f5',
  'gray-200': '#e4e4e7',
  'gray-300': '#d4d4d8',
  'gray-400': '#a1a1aa',
  'gray-500': '#71717a',
  'gray-600': '#52525b',
  'gray-700': '#3f3f46',
  'gray-800': '#27272a',
  'gray-900': '#18181b',

  'true-gray-50': '#fafafa',
  'true-gray-100': '#f5f5f5',
  'true-gray-200': '#e5e5e5',
  'true-gray-300': '#d4d4d4',
  'true-gray-400': '#a3a3a3',
  'true-gray-500': '#737373',
  'true-gray-600': '#525252',
  'true-gray-700': '#404040',
  'true-gray-800': '#262626',
  'true-gray-900': '#171717',

  'warm-gray-50': '#fafaf9',
  'warm-gray-100': '#f5f5f4',
  'warm-gray-200': '#e7e5e4',
  'warm-gray-300': '#d6d3d1',
  'warm-gray-400': '#a8a29e',
  'warm-gray-500': '#78716c',
  'warm-gray-600': '#57534e',
  'warm-gray-700': '#44403c',
  'warm-gray-800': '#292524',
  'warm-gray-900': '#1c1917',

  'red-50': '#fef2f2',
  'red-100': '#fee2e2',
  'red-200': '#fecaca',
  'red-300': '#fca5a5',
  'red-400': '#f87171',
  'red-500': '#ef4444',
  'red-600': '#dc2626',
  'red-700': '#b91c1c',
  'red-800': '#991b1b',
  'red-900': '#7f1d1d',

  'orange-50': '#fff7ed',
  'orange-100': '#ffedd5',
  'orange-200': '#fed7aa',
  'orange-300': '#fdba74',
  'orange-400': '#fb923c',
  'orange-500': '#f97316',
  'orange-600': '#ea580c',
  'orange-700': '#c2410c',
  'orange-800': '#9a3412',
  'orange-900': '#7c2d12',

  'amber-50': '#fffbeb',
  'amber-100': '#fef3c7',
  'amber-200': '#fde68a',
  'amber-300': '#fcd34d',
  'amber-400': '#fbbf24',
  'amber-500': '#f59e0b',
  'amber-600': '#d97706',
  'amber-700': '#b45309',
  'amber-800': '#92400e',
  'amber-900': '#78350f',

  'yellow-50': '#fefce8',
  'yellow-100': '#fef9c3',
  'yellow-200': '#fef08a',
  'yellow-300': '#fde047',
  'yellow-400': '#facc15',
  'yellow-500': '#eab308',
  'yellow-600': '#ca8a04',
  'yellow-700': '#a16207',
  'yellow-800': '#854d0e',
  'yellow-900': '#713f12',

  'lime-50': '#f7fee7',
  'lime-100': '#ecfccb',
  'lime-200': '#d9f99d',
  'lime-300': '#bef264',
  'lime-400': '#a3e635',
  'lime-500': '#84cc16',
  'lime-600': '#65a30d',
  'lime-700': '#4d7c0f',
  'lime-800': '#3f6212',
  'lime-900': '#365314',

  'green-50': '#f0fdf4',
  'green-100': '#dcfce7',
  'green-200': '#bbf7d0',
  'green-300': '#86efac',
  'green-400': '#4ade80',
  'green-500': '#22c55e',
  'green-600': '#16a34a',
  'green-700': '#15803d',
  'green-800': '#166534',
  'green-900': '#14532d',

  'emerald-50': '#ecfdf5',
  'emerald-100': '#d1fae5',
  'emerald-200': '#a7f3d0',
  'emerald-300': '#6ee7b7',
  'emerald-400': '#34d399',
  'emerald-500': '#10b981',
  'emerald-600': '#059669',
  'emerald-700': '#047857',
  'emerald-800': '#065f46',
  'emerald-900': '#064e3b',

  'teal-50': '#f0fdfa',
  'teal-100': '#ccfbf1',
  'teal-200': '#99f6e4',
  'teal-300': '#5eead4',
  'teal-400': '#2dd4bf',
  'teal-500': '#14b8a6',
  'teal-600': '#0d9488',
  'teal-700': '#0f766e',
  'teal-800': '#115e59',
  'teal-900': '#134e4a',

  'cyan-50': '#ecfeff',
  'cyan-100': '#cffafe',
  'cyan-200': '#a5f3fc',
  'cyan-300': '#67e8f9',
  'cyan-400': '#22d3ee',
  'cyan-500': '#06b6d4',
  'cyan-600': '#0891b2',
  'cyan-700': '#0e7490',
  'cyan-800': '#155e75',
  'cyan-900': '#164e63',

  'light-blue-50': '#f0f9ff',
  'light-blue-100': '#e0f2fe',
  'light-blue-200': '#bae6fd',
  'light-blue-300': '#7dd3fc',
  'light-blue-400': '#38bdf8',
  'light-blue-500': '#0ea5e9',
  'light-blue-600': '#0284c7',
  'light-blue-700': '#0369a1',
  'light-blue-800': '#075985',
  'light-blue-900': '#0c4a6e',

  'blue-50': '#eff6ff',
  'blue-100': '#dbeafe',
  'blue-200': '#bfdbfe',
  'blue-300': '#93c5fd',
  'blue-400': '#60a5fa',
  'blue-500': '#3b82f6',
  'blue-600': '#2563eb',
  'blue-700': '#1d4ed8',
  'blue-800': '#1e40af',
  'blue-900': '#1e3a8a',

  'indigo-50': '#eef2ff',
  'indigo-100': '#e0e7ff',
  'indigo-200': '#c7d2fe',
  'indigo-300': '#a5b4fc',
  'indigo-400': '#818cf8',
  'indigo-500': '#6366f1',
  'indigo-600': '#4f46e5',
  'indigo-700': '#4338ca',
  'indigo-800': '#3730a3',
  'indigo-900': '#312e81',

  'violet-50': '#f5f3ff',
  'violet-100': '#ede9fe',
  'violet-200': '#ddd6fe',
  'violet-300': '#c4b5fd',
  'violet-400': '#a78bfa',
  'violet-500': '#8b5cf6',
  'violet-600': '#7c3aed',
  'violet-700': '#6d28d9',
  'violet-800': '#5b21b6',
  'violet-900': '#4c1d95',

  'purple-50': '#faf5ff',
  'purple-100': '#f3e8ff',
  'purple-200': '#e9d5ff',
  'purple-300': '#d8b4fe',
  'purple-400': '#c084fc',
  'purple-500': '#a855f7',
  'purple-600': '#9333ea',
  'purple-700': '#7e22ce',
  'purple-800': '#6b21a8',
  'purple-900': '#581c87',

  'fuchsia-50': '#fdf4ff',
  'fuchsia-100': '#fae8ff',
  'fuchsia-200': '#f5d0fe',
  'fuchsia-300': '#f0abfc',
  'fuchsia-400': '#e879f9',
  'fuchsia-500': '#d946ef',
  'fuchsia-600': '#c026d3',
  'fuchsia-700': '#a21caf',
  'fuchsia-800': '#86198f',
  'fuchsia-900': '#701a75',

  'pink-50': '#fdf2f8',
  'pink-100': '#fce7f3',
  'pink-200': '#fbcfe8',
  'pink-300': '#f9a8d4',
  'pink-400': '#f472b6',
  'pink-500': '#ec4899',
  'pink-600': '#db2777',
  'pink-700': '#be185d',
  'pink-800': '#9d174d',
  'pink-900': '#831843',

  'rose-50': '#fff1f2',
  'rose-100': '#ffe4e6',
  'rose-200': '#fecdd3',
  'rose-300': '#fda4af',
  'rose-400': '#fb7185',
  'rose-500': '#f43f5e',
  'rose-600': '#e11d48',
  'rose-700': '#be123c',
  'rose-800': '#9f1239',
  'rose-900': '#881337',
}

const fontSizes = {
  xs: '0.75rem',
  sm: '0.875rem',
  default: '1rem',
  lg: '1.125rem',
  xl: '1.25rem',
  '2xl': '1.5rem',
  '3xl': '1.875rem',
  '4xl': '2.25rem',
  '5xl': '3rem',
  '6xl': '3.75rem',
  '7xl': '4.5rem',
  '8xl': '6rem',
  '9xl': '8rem',
}

const texts = Object.keys(fontSizes).reduce(
  (texts, key) => {
    texts[key as keyof typeof fontSizes] = { fontSize: key, lineHeight: key }
    return texts
  },
  {} as {
    [key in keyof typeof fontSizes]: { fontSize: string; lineHeight: string }
  },
)

export const defaultTheme = {
  colors: generateHexAlphaVariants(colors),
  space,
  screens: {
    _: 0,
    xs: 0,
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    '2xl': 1536,
  },
  durations: {
    instant: '100ms',
    'fast-in': '250ms',
    'fast-out': '200ms',
    'slow-in': '300ms',
    'slow-out': '250ms',
  },
  sizes: {
    ...space,
    0.5: undefined,
    1: undefined,
    '0.5s': space[0.5],
    '1s': space[1],
    full: '100%',
    xs: '20rem',
    sm: '24rem',
    md: '28rem',
    lg: '32rem',
    xl: '36rem',
    '2xl': '42rem',
    '3xl': '48rem',
    '4xl': '56rem',
    '5xl': '64rem',
    '6xl': '72rem',
    '7xl': '80rem',
  },
  radii: {
    none: '0',
    sm: '0.125rem',
    default: '0.25rem',
    md: '0.375rem',
    lg: '0.5rem',
    xl: '0.75rem',
    '2xl': '1rem',
    '3xl': '1.5rem',
    full: '9999px',
  },
  shadows: {
    xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
    default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
    inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
    outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
  },
  fontSizes,
  fontWeights: {
    hairline: '100',
    thin: '200',
    light: '300',
    normal: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
    extrabold: '800',
    black: '900',
  },
  fonts: {
    mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
    serif: `ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`,
    sans: `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
  },
  letterSpacings: {
    tighter: '-0.05em',
    tight: '-0.025em',
    normal: '0em',
    wide: '0.025em',
    wider: '0.05em',
    widest: '0.1em',
  },
  lineHeights: {
    none: 1,
    tight: 1.25,
    snug: 1.375,
    normal: 1.5,
    relaxed: 1.625,
    loose: 2,
    3: '.75rem',
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    7: '1.75rem',
    8: '2rem',
    9: '2.25rem',
    10: '2.5rem',

    // Match fontSizes
    xs: '1rem',
    sm: '1.25rem',
    default: '1.5rem',
    lg: '1.75rem',
    xl: '1.75rem',
    '2xl': '2rem',
    '3xl': '2.25rem',
    '4xl': '2.5rem',
    '5xl': 1,
    '6xl': 1,
    '7xl': 1,
    '8xl': 1,
    '9xl': 1,
  },
  gridTemplateColumns: {
    1: 'repeat(1, minmax(0, 1fr))',
    2: 'repeat(2, minmax(0, 1fr))',
    3: 'repeat(3, minmax(0, 1fr))',
    4: 'repeat(4, minmax(0, 1fr))',
    5: 'repeat(5, minmax(0, 1fr))',
    6: 'repeat(6, minmax(0, 1fr))',
    7: 'repeat(7, minmax(0, 1fr))',
    8: 'repeat(8, minmax(0, 1fr))',
    9: 'repeat(9, minmax(0, 1fr))',
    10: 'repeat(10, minmax(0, 1fr))',
    11: 'repeat(11, minmax(0, 1fr))',
    12: 'repeat(12, minmax(0, 1fr))',
  },
  gridTemplateRows: {
    1: 'repeat(1, minmax(0, 1fr))',
    2: 'repeat(2, minmax(0, 1fr))',
    3: 'repeat(3, minmax(0, 1fr))',
    4: 'repeat(4, minmax(0, 1fr))',
    5: 'repeat(5, minmax(0, 1fr))',
    6: 'repeat(6, minmax(0, 1fr))',
  },
  borderWidths: {
    default: 1,
  },
  ringWidths: {
    default: 3,
  },
  borders: {
    default: '1px solid transparent',
  },
  texts,
  transitions,
  transitionProperties,
  timingFunctions,
  animations: {
    spin: 'x-spin 1s linear infinite',
    ping: 'x-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
    pulse: 'x-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
    bounce: 'x-bounce 1s infinite',
  },
  states: {
    _: null,
    motionSafe: '@media (prefers-reduced-motion: no-preference)',
    motionReduce: '@media (prefers-reduced-motion: reduce)',
    first: '&:first-child',
    last: '&:last-child',
    odd: '&:odd',
    even: '&:even',
    visited: '&:visited',
    checked: '&:checked',
    focusWithin: '&:focus-within',
    hover: '&:hover',
    focus: '&:focus',
    focusVisible: '&:focus-visible',
    active: '&:active',
    disabled: '&:disabled, &[aria-disabled=true]',
    placeholder: '&::placeholder',
  },
  xstyled: {
    cache: true,
  },
}

export type DefaultTheme = typeof defaultTheme
